<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload= function () {
            var app4 = new Vue({
                el: '#app-4',
                data: {
                   username:'',
                    age: '',
                    peoples:[
                        { name:'zjf',age:'21',time:new Date()},
                        { name:'yy',age:'22',time:new Date()},
            ]
                },
                methods:{
                    add: function () {
                        this.peoples.push(  { name:this.username,age:this.age,time:new Date()})

                    },
                    removeall: function () {
                        this.peoples=[];

                    },
                    remove: function (index) {
                        this.peoples.splice(index,1);

                    }
                },


        })};
    </script>
</head>
<body>
<div id="app-4">
   <input v-model="username">
   <input v-model="age">
    <table border="1">
  <tr>
      <th>序号</th>
      <th>名字</th>
      <th>年龄</th>
      <th>时间</th>
      <th>操作</th>
  </tr>
        <tr v-for="(todo,index) in peoples">
            <td> {{ index+1 }}</td>
            <td> {{ todo.name }}</td>
        <td>{{ todo.age }}</td>
            <td>{{ todo.time.getHours()+':'+ todo.time.getMinutes()+':'+ todo.time.getSeconds() }}</td>
            <td>  <button v-on:click="remove(index)">删除</button></td>
    </tr>
        <button v-on:click="add">添加</button>
        <button v-on:click="removeall">重置</button>

    </table>
    </div>
</body>
</html>